<template>
  <Dialog v-model="dialogVisible" width="60%" title="选择订单" :before-close="() => closeDialog()">
    <!--    顶部查询项-->
    <el-form :model="form" inline>
      <el-form-item :label="t('follow.order_no')">
        <el-input
          v-model="form.order_no"
          clearable
          :placeholder="t('follow.order_no')"
          style="width: 250px"
        />
      </el-form-item>
      <el-form-item :label="t('follow.order_type')" prop="order_type">
        <el-select
          v-model="form.order_type"
          :filterable="true"
          :placeholder="t('follow.order_type')"
          :clearable="false"
          style="width: 250px"
        >
          <el-option
            v-for="item in ordertypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="getList">查询</el-button>
        <el-button icon="Refresh" @click="reset(true)">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格主体 -->
    <el-table
      class="m-t-10px"
      :data="dataList"
      highlight-current-row
      stripe
      border
      ref="tableRef"
      v-loading="tableLoading"
      row-key="id"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" :reserve-selection="true" width="55" />
      <el-table-column
        :label="t('follow.order_no')"
        prop="order_no"
        min-width="200"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('follow.total_amount')"
        prop="total_amount"
        min-width="200"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('follow.create_time')"
        prop="create_time"
        min-width="200"
        :show-overflow-tooltip="true"
      />
    </el-table>
    <!--    分页-->
    <Pagination
      :total="paginationTotal"
      v-model:page="form.pageIndex"
      v-model:limit="form.pageSize"
      @pagination="getList"
    />
    <template #footer>
      <el-button class="m-r-4" @click="closeDialog"
        >{{ t('system.parameterConfig.cancel') }}
      </el-button>
      <el-button type="primary" @click="submit">{{ t('action.add') }}</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import Pagination from '@/components/Pagination/index.vue'
import { getOrderListApi } from '@/api/customerFollow'
import { Dialog } from '@/components/Dialog'
import { ElMessage } from 'element-plus'
import { getEnumApi } from '@/api/customerFollow'

const props = withDefaults(defineProps<{ multiple?: boolean }>(), {
  multiple: false
})
const emit = defineEmits(['exposeMultipleData'])
const { t } = useI18n()
const tableRef = ref()

const isReset = ref<boolean>(false)
const dialogVisible = ref<boolean>(false)
const tableLoading = ref<boolean>(false)
const dataList = ref<any[]>([])
const multipleSelection = ref<any[]>([])
const selectionPak = ref<any[]>([])

const ordertypeList = ref<Array<Record<string, any>>>([])

const paginationTotal = ref<number>(0)
const form = ref<Record<string, any>>({
  order_no: '',
  order_type: 'order',
  pageIndex: 1,
  pageSize: 5
})

//批量勾选
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val
}

//点击添加按钮
const submit = () => {
  if (!multipleSelection.value.length) return ElMessage.warning('请勾选客户')
  if (!props.multiple && multipleSelection.value.length > 1)
    return ElMessage.warning('最多只能勾选一条订单')
  if (props.multiple && isReset.value) {
    const merge = selectionPak.value.concat(multipleSelection.value)
    emit('exposeMultipleData', deduplication(merge))
  } else {
    emit('exposeMultipleData', multipleSelection.value)
  }
  closeDialog()
}

//一维数组去重
const deduplication = (val: any[], key?: string) => {
  if (!val || !val.length) return
  return val.reduce((acc, item) => {
    if (!acc.some((x: Record<string, any>) => x[key ?? 'id'] === item[key ?? 'id'])) {
      acc.push(item)
    }
    return acc
  }, [])
}

//点击取消关闭弹框
const closeDialog = () => {
  reset()
  dialogVisible.value = false
}

//初始化请求
const getList = async () => {
  tableLoading.value = true
  const params = JSON.parse(JSON.stringify(form.value))
  const resp = await getOrderListApi(params)
  dataList.value = resp.data.list
  paginationTotal.value = resp.data.total
  tableLoading.value = false
}

//重置查询项
const reset = (isRequest?: boolean) => {
  form.value = {
    order_no: '',
    order_type: form.value.order_type,
    pageIndex: 1,
    pageSize: 5
  }
  paginationTotal.value = 0
  multipleSelection.value = []
  nextTick(() => {
    tableRef!.value!.clearSelection()
  })
  if (isRequest) {
    getList()
    isReset.value = true
  }
}

const initialize = (val: any[], customer_id: any) => {
  getDropDownBoxInfo()
  form.value.customer_id = customer_id
  getList()
  if (props.multiple) selectionPak.value = val
  if (!val || !val.length) return
  val.forEach((item: Record<string, any>) => {
    nextTick(() => {
      tableRef!.value!.toggleRowSelection(item, true)
    })
  })
}
//获取枚举
const getDropDownBoxInfo = async () => {
  const resp = await getEnumApi({ field: 'all' })
  ordertypeList.value = resp.data.order_type
}

defineExpose({
  dialogVisible,
  initialize
})
</script>

<style lang="less" scoped></style>
